<template>
	<view id="white">
		<Header txt="白名单" v-if="baidu"></Header>
		<HeaderB txt="白名单" v-if="!baidu"></HeaderB>
		<view class="txt">
			<text>本机IP:</text>
			<text>{{ip}}</text>
		</view>
		<view class="txt txt2">
			<textarea  placeholder="请输入内容" v-model="textarea" />
		</view>
		<view class="txt txtP">
			*当前可配置白名单为<text class="txtL">{{userInfo.ipCount}}</text>
			个，如需更多请联系客服
		</view>
		<view class="txt">
			<button type="primary" @click="batchSaveRecord">保存</button>
		</view>
		
	</view>
</template>

<script>
	import axios from "../../common/axios.js"
	export default {
		data() {
			return {
				ips:'',
				ip:"",
				textarea:'',
				input1:'',
				baidu:true
			};
		},
		onShow() {
			this.getuserIp()
			this.listuserIp()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		computed:{
			userInfo() {
			      return this.$store.state.userInfo;
			},
		},
		methods:{
			getuserIp(){
				this.$store
				  .dispatch("UserIp")
				  .then((response) => {
					  if(response.data.code==0){
						  this.ip=response.data.obj
					  }
				  })
				  .catch(() => {});
			},
			batchSaveRecord(){
				let res = this.textarea.split('\n');
				let arr = [];
				let that = this;
				res.forEach(function(item){
				    if(item.length > 1 && /^(\d|[1-9]\d|1\d{2}|2[0-5][0-9])\.(\d|[1-9]\d|1\d{2}|2[0-5][0-9])\.(\d|[1-9]\d|1\d{2}|2[0-5][0-9])\.(\d|[1-9]\d|1\d{2}|2[0-5][0-9])$/.test(item)){
				        arr.push(item)
				    }
				})
				let ips
				console.log(12,res)
			    if(arr.length < 1){
			        uni.showModal({
			        	title:"提示",
						content:"没有符合规范的IP,此操作将删除所有固定IP白名单, 是否继续?",
						success:function(res){
							if(res.confirm){
								that.$store
									.dispatch("BatchSaveRecord")
									.then((response) => {
										if(response.data.code){											
											uni.showToast({
											    title:"操作成功"
											})
										}
									})
							}else if(res.cancel){
							}
						}
			        })
					return false
			    } 
				that.$store
					.dispatch("BatchSaveRecord2",{ips:arr})
					.then((response) => {
						if(response.data.code==0){
							uni.showToast({
							    title:"操作成功"
							})
							that.listuserIp()
						}else{
							uni.showToast({
								title: response.data.msg,
								icon:'none',
								duration: 2000
							});
						}
					})
			},
			listuserIp(){
				let that=this
				this.$store
				  .dispatch("ListUserIp")
				  .then((response) => {
						if(response.data.obj.length > 0){
						    var str = ''
						    response.data.obj.forEach(function(item){
						        if(item.type == 1){
						            str += item.ip + '\n';
						        }
						        if(item.type == 3){
						            that.input1 = item.ip
						        }
						    })
						    that.textarea = str
						}else{
						    that.textarea = ''
						}
				  })
				  .catch(() => {});
			}
		}
	}
</script>

<style lang="less" >
	#white{
		background-color: #f6f8fa;
		overflow: hidden;
		.txt{
			padding: 0 30rpx;
			background-color: #fff;
		}
		.txtP{
			font-size: 24rpx;
			color: #FF5D2B;
			background-color: #f6f8fa;
		}
		.txtL{
			font-size: 28rpx;
		}
		.txt2{
			margin: 30rpx;
			
		}
		button{
			background: #007AFF;
			margin-top: 80rpx;
		}
	}
</style>
